<template>
  <!-- 埋点统计 -->
  <div class="app-container">
    <div class="app-wrap" style="height:100vh;overflow:auto;padding-bottom:80px;">
      <div class="border-line">
        <p>APP埋点统计</p>
        <div class="flexStartDetween">
          <div></div>
          <el-form ref="form" :model="appForm" label-width="80px" class="flexStart marginR20">
            <el-form-item label="渠道:" label-width="60px">
              <el-select v-model="appForm.agent_id" placeholder="请选择渠道" filterable >
                <el-option label="全部" value="" ></el-option>
                <el-option :label="'【'+item.value+'】'+item.label" :value="item.value" v-for="(item, index) in channelData" :key="index"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="日期时间:" label-width="80px">
              <el-date-picker is-range v-model="appForm.dateTime" type="date" 
              class="full-width-input time-box" :clearable="false"></el-date-picker>
            </el-form-item>
            <el-button class="marginL10" type="primary" @click.stop="submitAppQuery" style="height:40px">查 询</el-button>
            <el-form-item label="" label-width="10px">
              <el-radio-group v-model="appForm.is_chart" @change="submitAppQuery">
                <!-- <el-radio-button :label="0"><i class="el-icon-data-line"></i>人数折线图</el-radio-button> -->
                <el-radio-button :label="1"><i class="el-icon-data-line"></i>活动埋点</el-radio-button>
                <el-radio-button :label="2"><i class="el-icon-c-scale-to-original"></i>大厅柱状图</el-radio-button>
              </el-radio-group>
            </el-form-item>
          </el-form>
        </div>
        <!-- 人数折线图 -->
        <line-chart v-show="appForm.is_chart==0 && appDataLineEchart.length" id="appLineEcharts" ref="appLineEcharts" :legendData="appLegendLineEchart"  :keyData="webKeyLineEchart" :dataList="appDataLineEchart"/>
        <!-- 活动埋点 -->
        <line-chart v-show="appForm.is_chart==1 && appDataActiveEchart.length" id="appActiveEcharts" ref="appActiveEcharts" :legendData="appLegendActiveEchart"  :keyData="appKeyActiveEchart" :dataList="appDataActiveEchart"/>
        <!-- 大厅柱状图 -->
        <columnar-chart v-show="appForm.is_chart==2 && appColumnarData.length" id="appColumnarEcharts" ref="appColumnarEcharts" :legendData="appLegendColumnar" :dataList="appColumnarData"/>
        <!-- 暂无数据 -->
        <div class="noDataAvailable" v-show="!listLoading && !appDataActiveEchart.length && !appDataLineEchart.length && !appColumnarData.length">
          <img src="@/assets/img/nodata.png" alt="">
          <p> ~ 暂无数据 ~ </p>
        </div>
      </div>
      <div class="border-line">
        <p>Web端埋点统计</p>
        <div class="flexStartDetween">
          <div></div>
          <el-form ref="form" :model="webForm" label-width="80px" class="flexStart marginR20">
            <el-form-item label="渠道:" label-width="60px">
              <el-select v-model="webForm.agent_id" placeholder="请选择渠道" filterable >
                <el-option label="全部" value="" ></el-option>
                <el-option :label="'【'+item.value+'】'+item.label" :value="item.value" v-for="(item, index) in channelData" :key="index"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="日期时间:" label-width="80px">
              <el-date-picker is-range v-model="webForm.dateTime" type="date" 
              class="full-width-input time-box" :clearable="false"></el-date-picker>
            </el-form-item>
            <el-button class="marginL10" type="primary" @click.stop="submitWebQuery" style="height:40px">查 询</el-button>
            <el-form-item label="" label-width="10px">
              <el-radio-group v-model="webForm.is_chart" @change="submitWebQuery">
                <!-- <el-radio-button :label="0"><i class="el-icon-data-line"></i>人数折线图</el-radio-button> -->
                <el-radio-button :label="1"><i class="el-icon-data-line"></i>活动埋点</el-radio-button>
                <el-radio-button :label="2"><i class="el-icon-c-scale-to-original"></i>大厅柱状图</el-radio-button>
              </el-radio-group>
            </el-form-item>
          </el-form>
        </div>
        <!-- 人数折线图 -->
        <line-chart v-show="webForm.is_chart==0 && webDataLineEchart.length" id="webLineEcharts" ref="webLineEcharts" :legendData="webLegendLineEchart"  :keyData="webKeyLineEchart" :dataList="webDataLineEchart"/>
        <!-- 活动埋点 -->
        <line-chart v-show="webForm.is_chart==1 && webDataActiveEchart.length" id="webActiveEcharts" ref="webActiveEcharts" :legendData="webLegendActiveEchart"  :keyData="webKeyActiveEcharts" :dataList="webDataActiveEchart"/>
        <!-- 大厅柱状图 -->
        <columnar-chart v-show="webForm.is_chart==2 && webColumnarData.length" id="webColumnarEcharts" ref="webColumnarEcharts" :legendData="webLegendColumnar" :dataList="webColumnarData"/>
        <!-- 暂无数据 -->
        <div class="noDataAvailable" v-show="!listLoading && !webDataLineEchart.length && !webDataActiveEchart.length && !webColumnarData.length">
          <img src="@/assets/img/nodata.png" alt="">
          <p> ~ 暂无数据 ~ </p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  getBuryingPoint,
  getActivityPoint
} from '@/api/statistics'
 import {
  ACTIVE_POINT_TYPE,
  Funnel_POINT_TYPE,
} from '@/utils/enum'
import LineChart from '@/components/Echarts/lineChart.vue';
import ColumnarChart from '@/components/Echarts/columnarChart.vue';
export default {
  name: 'pointStatistics',
  components: {
    LineChart,
    ColumnarChart
  },
  data () {
    return {
      ACTIVE_POINT_TYPE,
      Funnel_POINT_TYPE,
      channelData: this.$store.state.commonState.channelDataArray,
      currentTotal: 0,
      listLoading: true,
      appForm: {
        page: 1,
        size: 5000,
        agent_id:'',
        machine_type:2,
        dateTime:this.$public.getDateDay(0),
        start_time:'',
        end_time:'',
        is_chart:1
      },
      // app的人数折线图
      appKeyLineEchart: [],
      appLegendLineEchart: [],
      appDataLineEchart: [],
      // app的活动埋点图
      appKeyActiveEchart: [],
      appLegendActiveEchart: [],
      appDataActiveEchart: [],
      // app的柱状图
      appLegendColumnar: [],
      appColumnarData: [],

      webForm:{
        page: 1,
        size: 5000,
        agent_id:'',
        machine_type:1,
        dateTime:this.$public.getDateDay(0),
        start_time:'',
        end_time:'',
        is_chart:1
      },
      // web的人数折线图
      webKeyLineEchart: [],
      webLegendLineEchart: [],
      webDataLineEchart: [],
      // web的活动埋点图
      webKeyActiveEcharts: [],
      webLegendActiveEchart: [],
      webDataActiveEchart: [],
      // web的柱状图
      webLegendColumnar: [],
      webColumnarData: [],
    }
  },
  created() {},
  activated(){
    this.channelData=this.$store.state.commonState.channelDataArray
    this.getWebActiveDataList()
    this.getAppActiveDataList()
  },
  methods: {
    // 查询-app
    submitAppQuery(){
      let that = this,params = JSON.parse(JSON.stringify(that.appForm));
      switch (params.is_chart) {
        case 0:
          that.appDataActiveEchart=[]
          that.appColumnarData=[]
          that.getAppActiveDataList() // 活动埋点
        break;
        case 1:
          that.appDataLineEchart=[]
          that.appColumnarData=[]
          that.getAppActiveDataList() // 活动埋点
        break;
        case 2:
          that.appDataLineEchart=[]
          that.appDataActiveEchart=[]
          that.getAppColumnarDataList() // 柱状图
        break;
      }
    },
    // app活动埋点
    async getAppActiveDataList () {
      let that = this,params = JSON.parse(JSON.stringify(that.appForm));
      that.appKeyActiveEchart = []
      that.appLegendActiveEchart = []
      that.appDataActiveEchart
      if (params.dateTime) {
        params.start_time = that.$public.standardDate(params.dateTime).substr(0,10)+' 00:00:00'
        params.end_time = that.$public.standardDate(params.dateTime).substr(0,10)+' 23:59:59'
      }else{
        params.start_time = ''
        params.end_time = ''
      }
      const response= await getActivityPoint(params)
      if (response.code == 1) {
        if(response.data.list.length){
          response.data.list.forEach(item=>{
            item.date=item.date.substring(0,10)
            that.appKeyActiveEchart.push(item.date)
          })
          that.ACTIVE_POINT_TYPE.map(item=>{
            that.appLegendActiveEchart.push(item.label)
          })
          that.appDataActiveEchart=that.pointActiveData(that.appLegendActiveEchart,response.data.list)
          that.appKeyActiveEchart=Array.from(new Set(that.appKeyActiveEchart)).reverse();
        }else{
          that.appDataActiveEchart=[]
        }
        that.$nextTick(()=>{
          that.$refs.appActiveEcharts.getEcharts()
        })
      }else{
        that.$message.error(response.msg)
      }
      that.listLoading = false
    },
    // app柱状图
    async getAppColumnarDataList () {
      let that = this,params = JSON.parse(JSON.stringify(that.appForm));
      that.appColumnarData = []
      that.appLegendColumnar = []
      if (params.dateTime) {
        params.start_time = that.$public.standardDate(params.dateTime).substr(0,10)+' 00:00:00'
        params.end_time = that.$public.standardDate(params.dateTime).substr(0,10)+' 23:59:59'
      }else{
        params.start_time = ''
        params.end_time = ''
      }
      const response= await getBuryingPoint(params)
      if (response.code == 1) {
        if(response.data.list.length){
          response.data.list.forEach(item=>{
            item.date=item.date.substring(0,10)
          })
          that.appColumnarData=that.pointAppColumnarData(response.data.list)
        }else{
          that.appColumnarData=[]
        }
        that.$nextTick(()=>{
          that.$refs.appColumnarEcharts.getEcharts()
        })
      }else{
        that.$message.error(response.msg)
      }
      that.listLoading = false
    },
    // 查询-web
    submitWebQuery(){
      let that = this,params = JSON.parse(JSON.stringify(that.webForm));
      switch (params.is_chart) {
        case 0:
          that.webColumnarData=[]
          that.webDataActiveEchart=[]
          that.getWebActiveDataList() // 活动埋点
        break;
        case 1:
          that.webColumnarData=[]
          that.webDataLineEchart=[]
          that.getWebActiveDataList() // 活动埋点
        break;
        case 2:
          that.webDataActiveEchart=[]
          that.webDataLineEchart=[]
          that.getWebColumnarDataList() // 柱状图
        break;
      }
    },
    // web活动埋点
    async getWebActiveDataList () {
      let that = this,params = JSON.parse(JSON.stringify(that.webForm));
      that.webKeyActiveEcharts = []
      that.webLegendActiveEchart = []
      that.webDataActiveEchart = []
      if (params.dateTime) {
        params.start_time = that.$public.standardDate(params.dateTime).substr(0,10)+' 00:00:00'
        params.end_time = that.$public.standardDate(params.dateTime).substr(0,10)+' 23:59:59'
      }else{
        params.start_time = ''
        params.end_time = ''
      }
      const response= await getActivityPoint(params)
      if (response.code == 1) {
        if(response.data.list.length){
          response.data.list.forEach(item=>{
            item.date=item.date.substring(0,10)
            that.webKeyActiveEcharts.push(item.date)
          })
          that.ACTIVE_POINT_TYPE.map(item=>{
            that.webLegendActiveEchart.push(item.label)
          })
          that.webKeyActiveEcharts=Array.from(new Set(that.webKeyActiveEcharts)).reverse();
          that.webDataActiveEchart=that.pointActiveData(that.webLegendActiveEchart,response.data.list)
        }else{
          that.webDataActiveEchart=[]
        }
        that.$nextTick(()=>{
          that.$refs.webActiveEcharts.getEcharts()
        })
      }else{
        that.$message.error(response.msg)
      }
      that.listLoading = false
    },
    // web柱状图
    async getWebColumnarDataList () {
      let that = this,params = JSON.parse(JSON.stringify(that.webForm));
      that.webColumnarData = []
      that.webLegendColumnar = []
      if (params.dateTime) {
        params.start_time = that.$public.standardDate(params.dateTime).substr(0,10)+' 00:00:00'
        params.end_time = that.$public.standardDate(params.dateTime).substr(0,10)+' 23:59:59'
      }else{
        params.start_time = ''
        params.end_time = ''
      }
      const response= await getBuryingPoint(params)
      if (response.code == 1) {
        if(response.data.list.length){
          response.data.list.forEach(item=>{
            item.date=item.date.substring(0,10)
          })
          that.webColumnarData=that.pointWebColumnarData(response.data.list)
        }else{
          that.webColumnarData=[]
        }
        that.$nextTick(()=>{
          that.$refs.webColumnarEcharts.getEcharts()
        })
      }else{
        that.$message.error(response.msg)
      }
      that.listLoading = false
    },
    // 活动埋点
    pointActiveLabel(cellValue){
      cellValue=Number(cellValue)
      return (this.ACTIVE_POINT_TYPE.find((item) => item.value === cellValue)?.label || "-");
    },
    // 活动埋点
    pointActiveData(legendData,data){
      data=Array.from(new Set(data)).reverse()
      let echartsData=[];
      legendData.forEach(second=>{
        let arrData=[];
        data.forEach(item=>{
          for (const key in item) {
            let keyLength=key.substring(key.length-4,key.length) // 折线图数据
            if(second == this.pointActiveLabel(keyLength)){
              arrData.push(item[key])
            }
          }
        })
        echartsData.push({name:second,data:arrData, type: 'line',showAllSymbol:true})
      })
      return echartsData
    },
    // 柱状图埋点
    pointAppColumnarData(data){
      let tableData=[];
      // 组装数据
      this.Funnel_POINT_TYPE.forEach(item=>{
        Object.keys(data[0]).forEach(second=>{
          if(item.key==second){
            this.appLegendColumnar.push(item.label)
            tableData.push({value:data[0][second]})
          }
        })
      })
      return tableData
    },
    pointWebColumnarData(data){
      let tableData=[];
      // 组装数据
      this.Funnel_POINT_TYPE.forEach(item=>{
        Object.keys(data[0]).forEach(second=>{
          if(item.key==second){
            this.webLegendColumnar.push(item.label)
            tableData.push({name:item.label,value:data[0][second]})
          }
        })
      })
      return tableData
    },
  }
}
</script>

<style lang="scss" scoped>
.border-line{
  padding:10px;
  margin:0 auto 40px;
  background: #F9F9F9;
  border-radius: 5px;
  p{
    font-size: 24px;
    margin-left: 20px;
  }
  .echarts{
    width: 100%;
    height:400px;
    padding-top: 20px;
    background-color:#ffffff;
  }
}
</style>